<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
    <!--标题栏-->
    <h4 class="text-center text-white bg-danger p-3 rounded-3 shadow"></h4>
    <!--面包屑/菜单-->
    <div class="mt-6 row" style="font-size:18px;">
        <div class="col">
            <ul class="nav text-dark">
                <li :id='"type"+index' v-for="(type,index) in typeList" @click="resultName(index,type)" target="_blank"
                    :class=" resultNum === index?'active':''"
                >{{type.typename}}&nbsp;
            </ul>
        </div>
        <div class="col">
            <ul class="nav text-dark">
                <li :id='"cinemaLevel"+index1' v-for="(cinemaLevel,index1) in cinemaLevelList" @click="resultLevel(index1)" target="_blank"
                    :class=" resultNum1 === index1?'active':''"
                >{{cinemaLevel.level}}&nbsp;
            </ul>
        </div>
        <div class="col">
            <ul class="nav text-dark">
                <li :id='"roomEquipment"+index2' v-for="(roomEquipment,index2) in cinemaEquipmentList" @click="resultEquipment(index2)" target="_blank"
                    :class=" resultNum2 === index2?'active':''"
                >{{roomEquipment.equipment}}&nbsp;
            </ul>
        </div>
    </div>
    <div class="mt-3 text-center" style="font-size: 18px;"><b>热门排行</b></div>
    <div class="clearfix">
        <div style="width:30%" class="m-3 float-start border p-3 rounded-3" v-for="movie in movieList">
            <div style="font-size: 22px;">{{movie.id}}</div>
            <div style="font-size:16px;">{{movie.title}}</div>
        </div>
    </div>
</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            // typeList: [],
            movieList: [],
            cinemaNameList: [],
            typeList:[],
            cinemaEquipmentList:[],
            active: -1,
            num: "",
            num1: "",
            num2: "",
            name: "",
            type: {
                id:"",
                typeName:""
            },
            movie: {

                country:"",
                year:""
            },
        },
        methods: {
            resultName(index,type) {
                this.num = index;
                app.type = type;
                console.log(app.type)
                this.showMovieList();
            },
            /*resultLevel(index1) {
                this.num1 = index1;
                app.cinema.cinemaLevelF =$("#"+"cinemaLevel"+index1).text();
                console.log(app.cinema.cinemaLevelF);
                this.showCinemaList();
            },*/
            /*resultEquipment(index2) {
                this.num2 = index2;
                app.cinema.roomEquipmentF = $("#" + "roomEquipment"+index2).text();
                console.log(app.cinema.roomEquipmentF);
                this.showCinemaList();
            },*/
            showMovieList: function () {

                $.post("/movie/searchMovieByCondition", {
                    typeId: this.type.id,
                    countryId: this.movie.country.toString().trim(),
                    year: this.movie.year.toString().trim(),
                    orderNum: 1
                }, function (d) {
                    app.movieList = d;
                });
            },
            /*showCinemaNameList: function () {
                $.post("/cinema/selectCinemaNameListByCinema", {}, function (d) {
                    app.cinemaNameList = d;
                });
            },*/
            showTypeList: function () {
                $.post("/type/selectAllType", {}, function (d) {
                    app.typeList = d;
                    alert(app.typeList)
                });
            },
            /*showEquipmentList: function () {
                $.post("/room/selectEquipmentList", {}, function (d) {
                    app.cinemaEquipmentList = d;
                });
            },*/

        },
        computed: {

            resultNum() {

                return this.num;

            },
            resultNum1() {

                return this.num1;

            },
            resultNum2() {

                return this.num2;

            }

        },
        mounted: function () {
            // this.showTypeList();
            this.showMovieList();
            // this.showCinemaNameList();
            this.showTypeList();
            // this.showEquipmentList();
        }
    });
</script>
<style type="text/css">
    .active {

        background-color: aqua;

    }
</style>
</body>
</html>
